<template>
  <div class="solution-total" :class="isBlue ? '' : 'blue'">
    <div class="container">
      <h1 style="text-align: center; margin: 70px 0 80px 0" v-if="isTitle">
        {{ titleSame ? titleSame : "亿拓SCRM解决方案" }}
      </h1>

      <div class="cnt" :class="isTitle ? '' : 'marginTopHeight'" v-if="isLeft">
        <div class="left-cnt">
          <h1>{{ title }}</h1>
          <div class="details">
            {{ details }}
          </div>
          <ul>
            <li v-for="item in leftList" :key="item.id">
              <p>
                <img
                  src="../assets/img/keyPoints.png"
                  style="
                    width: 14px;
                    height: 14px;
                    position: relative;
                    top: 2px;
                    margin-right: 10px;
                  "
                  alt=""
                />
              </p>
              <p>{{ item.title }}</p>
            </li>
          </ul>

          <div class="btn">马上申请试用</div>
        </div>
        <div class="right-cnt">
          <img :src="url" style="width: 674px; height: 406px" alt="" />
        </div>
      </div>

      <div class="cnt" :class="isTitle ? '' : 'marginTopHeight'" v-else>
        <div class="right-cnt" style="margin-right: 41px">
          <img :src="url" style="width: 674px; height: 406px" alt="" />
        </div>
        <div class="left-cnt">
          <h1>{{ title }}</h1>
          <div class="details">{{ details }}</div>
          <ul>
            <li v-for="item in leftList" :key="item.id">
              <p>
                <img
                  src="../assets/img/keyPoints.png"
                  style="
                    width: 14px;
                    height: 14px;
                    position: relative;
                    top: 2px;
                    margin-right: 10px;
                  "
                  alt=""
                />
              </p>
              <p>{{ item.title }}</p>
            </li>
          </ul>

          <div class="btn">马上申请试用</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Solution",
  props: ["isTitle", "isLeft", "isBlue", "sort", "titleSame"],

  data() {
    return {
      leftList: [],
      title: "",
      details: "",
      url: "",
    };
  },

  watch: {
    sort: {
      handler(n, o) {
        if (n === 1) {
          this.leftList = [
            { id: 1, title: "渠道欢迎语" },
            { id: 2, title: "自动打渠道标签" },
            { id: 3, title: "渠道投放效果分析" },
            { id: 4, title: "按规则自动分配客户" },
          ];
          this.title = "多渠道活码引流，智能分析渠道";
          this.details =
            "使用独立渠道活码，自动触发渠道设置，分析投放效果，降低获客成本";
          this.url = require("../assets/img/program.jpg");
        } else if (n === 2) {
          this.leftList = [
            { id: 1, title: "群SOP/群日历" },
            { id: 2, title: "客户群群发" },
            { id: 3, title: "自动拉群" },
            { id: 4, title: "标签拉群" },
          ];
          this.title = "群运营高效触达，激活沉默客户";
          this.details =
            "提前设置好群SOP，统一管理和安排发送，员工可在企微侧边栏对客户进行快速、多次群发，保证高效准时的触达";
          this.url = require("../assets/img/img2.png");
        } else if (n === 3) {
          this.leftList = [
            { id: 1, title: "分销、裂变、红包等" },
            { id: 2, title: "海量内容模板" },
            { id: 3, title: "活动效果分析" },
            { id: 4, title: "客户价值分析" },
            { id: 5, title: "短链引流" },
          ];
          this.title = "多种营销工具，助力客户增长";
          this.details =
            "探马SCRM提供多种营销工具，帮助电商企业高效开展各种营销活动，引导社群用户参与，提升参与效果";
          this.url = require("../assets/img/img3.png");
        } else if (n === 4) {
          this.leftList = [
            { id: 1, title: "多维度客户画像标签" },
            { id: 2, title: "客户轨迹追踪" },
            { id: 3, title: "客户分层化管理" },
            { id: 4, title: "客户偏好分析" },
          ];
          this.title = "精细化客户画像，助力精准转化";
          this.details =
            "亿拓SCRM侧边栏提供客户详情、客户画像、订单详情、浏览轨迹等栏目，员工可通过侧边栏快速确定客户偏好，对客户开展精准营销，加强";
          this.url = require("../assets/img/img2.png");
        } else if (n === 5) {
          this.leftList = [
            { id: 1, title: "淘宝、天猫" },
            { id: 2, title: "1688" },
            { id: 3, title: "京东" },
            { id: 4, title: "微盟、有赞、小鹅通等" },
          ];
          this.title = "打通订单系统，全链路客户管理";
          this.details =
            "探马SCRM打通了各大电商平台，助力电商企业实现订单和客户销售管理系统全面打通";
          this.url = require("../assets/img/img3.png");
        } else if (n === 6) {
          this.leftList = [
            { id: 1, title: "渠道欢迎语" },
            { id: 2, title: "自动打渠道标签" },
            { id: 3, title: "渠道投放效果分析" },
            { id: 4, title: "按规则自动分配客户" },
          ];
          this.title = "多渠道获客";
          this.details =
            "适用于线上和线下投放较多的场景。外部客户可以扫码轻松添加企微员工好友，并且支持设置渠道活码分配规则，根据企业的需求个性化定制渠";
          this.url = require("../assets/img/e_img1.png");
        } else if (n === 7) {
          this.leftList = [
            { id: 1, title: "群SOP/群日历/群发助手 拷贝" },
            { id: 2, title: "自动拉群/标签拉群" },
            { id: 3, title: "群数据" },
            { id: 4, title: "客户群群发" },
          ];
          this.title = "标准化群运营";
          this.details =
            "大量学员入群后，使用探马SCRM高效运营和激活学员，产品之外，用服务引导转化";
          this.url = require("../assets/img/e_img2.png");
        } else if (n === 8) {
          this.leftList = [
            { id: 1, title: "多维度客户画像标签" },
            { id: 2, title: "客户轨迹追踪" },
            { id: 3, title: "客户分层化管理" },
            { id: 4, title: "客户偏好分析" },
          ];
          this.title = "客户标签体系精细化运营";
          this.details =
            "全维度洞察用户画像，自动打标签，洞察学员需求，有针对性的转化";
          this.url = require("../assets/img/e_img3.png");
        } else if (n === 10) {
          this.leftList = [
            { id: 1, title: "全渠道线索接入" },
            { id: 2, title: "拓客宝" },
          ];
          this.title = "海量获客，全渠道线索接入";
          this.details =
            "API接口对接，与头条系、百度系、腾讯系等广告营销平台打通，实现全渠道线索接入 拓客宝能海量获取客户线索，快速圈定目标企业客户";
          this.url = require("../assets/img/qf_img1.png");
        } else if (n === 11) {
          this.leftList = [
            { id: 1, title: "企业客户" },
            { id: 2, title: "企业画像" },
          ];
          this.title = "企业客户独立管理，关系更清晰";
          this.details =
            "独立「企业客户」列表，避免对To C客户产生干扰，清晰管理企业客户。信息以企业维度汇总，构建企业画像，挖掘需求，促进成单";
          this.url = require("../assets/img/qf_img2.png");
        } else if (n === 12) {
          this.leftList = [
            { id: 1, title: "企微协作人" },
            { id: 2, title: "群运营" },
            { id: 3, title: "客户管理" },
            { id: 4, title: "客户流转" },
          ];
          this.title = "跨部门协作，提升跟客效率";
          this.details =
            "企微多人协作，共享客户信息；智能群运营，提高社群服务效率 电销+面销+微销，客户偏好、画像一目了然；线索分配流转、撞单提醒等多";
          this.url = require("../assets/img/qf_img3.png");
        } else if (n === 13) {
          this.leftList = [
            { id: 1, title: "数据分析" },
            { id: 2, title: "商城打通" },
          ];
          this.title = "全链路数据打通，驱动增长";
          this.details =
            "获客：广告投放ROI、活动推广数据、内容营销数据 跟客：微信跟进数据、电销跟进数据、任务跟客数据、工单数据 客户行为：聊天会话";
          this.url = require("../assets/img/img3.png");
        } else if (n === 14) {
          this.leftList = [];
          this.title = "提供丰富的引流获客工具";
          this.details =
            "通过营销海报、引流码、红包等营销工具引导进店客户留存至门店企业微信，方便后续运营转化。";
          this.url = require("../assets/img/ls_img1.png");
        } else if (n === 15) {
          this.leftList = [];
          this.title = "员工离职自动继承";
          this.details =
            "员工离职之后，自动将离职员工客户及客户群分配给其他员工继续跟进。";
          this.url = require("../assets/img/ls_img2.png");
        } else if (n === 16) {
          this.leftList = [];
          this.title = "客户精细化运营分析";
          this.details =
            "提供员工会话内容、营销活动效果、客户访问记录等相关数据分析，诊断用户流失成因，实现精细化运营。";
          this.url = require("../assets/img/ls_img3.png");
        } else if (n === 17) {
          this.leftList = [];
          this.title = "企业营销素材库和聊天侧边栏";
          this.details =
            "提供企业营销素材库和聊天快捷工具栏，当员工遇到客户咨询时，可以一键调取侧边栏素材及时回复客户，促使用户转化。";
          this.url = require("../assets/img/ls_img4.png");
        } else if (n === 18) {
          this.leftList = [
            { id: 1, title: "营销内容" },
            { id: 2, title: "话术/问答库" },
            { id: 3, title: "客户标签" },
            { id: 4, title: "访客雷达" },
          ];
          this.title = "客户营销精细化";
          this.details =
            "营销内容、话术一键发送客户，快速解答问题，让客户理解保险产品根据客户标签，发送客户感兴趣的内容，追踪阅读轨迹并获取手机号，提醒";
          this.url = require("../assets/img/jr_xbr_img1.png");
        } else if (n === 19) {
          this.leftList = [
            { id: 1, title: "营销内容" },
            { id: 2, title: "话术/问答库" },
          ];

          this.title = "销售管理专业化";
          this.details =
            "销售数据分析，全面洞察电话外呼量、接通量、新增客户量、有效沟通率等几十个数据维度的数据指标 销售转化漏斗，透视客户整个生命周期";
          this.url = require("../assets/img/jr_xbr_img2.png");
        } else if (n === 20) {
          this.leftList = [
            { id: 1, title: "离职继承" },
            { id: 2, title: "销售质检" },
            { id: 3, title: "电销质检" },
            { id: 4, title: "敏感词/敏感动作质检" },
          ];

          this.title = "客户资源企业化";
          this.details =
            "离职继承与在职转移，客户资料同步转交，保护公司客源 销售质检，管理员工的企微沟通、电话沟通的情况，提醒敏感行为，避免飞单与私单";
          this.url = require("../assets/img/jr_xbr_img3.png");
        } else if (n === 21) {
          this.leftList = [
            { id: 1, title: "营销内容" },
            { id: 2, title: "话术/问答库" },
            { id: 3, title: "营销内容" },
          ];

          this.title = "与客户建立情感连接";
          this.details =
            "在生日、节日或重要时间点时，自动给客户发送祝福，避免遗忘，体现客户关怀 客户群发帮助批量标准化触达客户，实现客户的分层运营，提供个性化服务，体现服务的温度";
          this.url = require("../assets/img/jr_xbr_img4.png");
        } else if (n === 22) {
          this.leftList = [
            { id: 1, title: "营销裂变" },
            { id: 2, title: "渠道分析" },
          ];

          this.title = "精打细算，降低获客成本";
          this.details =
            "提供企微裂变、公众号裂变、抽奖等多种营销工具，成本低、快速实现客户导流 渠道分析评估投放效果，找准高ROI渠道精准营销，降低盲目投放带来的额外成本";
          this.url = require("../assets/img/ym_xbj_img1.png");
        } else if (n === 23) {
          this.leftList = [
            { id: 1, title: "API接口打通" },
            { id: 2, title: "客户标签" },
            { id: 3, title: "客户分层" },
            { id: 4, title: "客户SOP" },
          ];

          this.title = "精准营销，有温度的对话";
          this.details =
            "能与企业的CRM系统打通，同步数据，整合信息 自动客户标签，操作简单，挖掘客户需求，提供个性化项目方案，给予服务温度";
          this.url = require("../assets/img/ym_xbj_img2.png");
        } else if (n === 24) {
          this.leftList = [
            { id: 1, title: "对外资料" },
            { id: 2, title: "营销内容" },
            { id: 3, title: "话术库" },
            { id: 4, title: "问答库" },
          ];

          this.title = "增强客户信任，做专业的变美顾问";
          this.details =
            "提供历史朋友圈、我的小站等企微对外资料展示入口，传递公司信息，打造员工专业形象 话术SOP与问答库，积累金牌销售话术，企微一键发送客户，快速解答问题，体现专业";
          this.url = require("../assets/img/ym_xbj_img3.png");
        } else if (n === 25) {
          this.leftList = [
            { id: 1, title: "API接口打通" },
            { id: 2, title: "线索自动流转" },
            { id: 3, title: "商城打通" },
            { id: 4, title: "离职继承" },
          ];

          this.title = "全流程线上化管理，资源不流失";
          this.details =
            "API接口对接，支持全渠道的线索接入，线索按照规则自动分配与流转。与淘宝、京东、小鹅通、有赞商城打通，商品订单信息同步，实现“渠道-线索-订单”的互联，打造线上化业务管理模式 离职继承，客户转移给在职员工，可同步客户信息，保护公司客源";
          this.url = require("../assets/img/ym_xbj_img4.png");
        }
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.blue {
  background: #f8fbff;
}
.solution-total {
  width: 100%;
  overflow: hidden;
  li {
    list-style-type: none;
  }
  .marginTopHeight {
    margin-top: 75px !important;
  }
  .container {
    width: 1250px;
    margin: 0 auto;

    .cnt {
      display: flex;
      justify-content: space-between;
      margin-bottom: 81px;
    }
    h1 {
      font-size: 36px;
      font-family: PingFangSC;
      font-weight: 600;
      color: #333333;
    }
    .left-cnt {
      margin-top: 73px;
      ul {
        display: flex;
        flex-wrap: wrap;
      }
      li {
        display: flex;
        font-size: 14px;
        font-family: PingFangSC;
        font-weight: 400;
        color: #999999;
        width: 50%;
        margin-bottom: 21px;
      }
      h1 {
        font-size: 28px;
        font-family: PingFangSC;
        font-weight: 400;
        color: #333333;
      }
      .details {
        font-size: 14px;
        font-family: PingFangSC;
        font-weight: 400;
        color: #999999;
        margin: 28px 0 40px 0;
      }
      .btn {
        width: 200px;
        height: 50px;
        background: linear-gradient(90deg, #4574f7, #00a6ff);
        border-radius: 6px;
        font-size: 14px;
        font-family: PingFangSC;
        font-weight: 400;
        color: #ffffff;
        line-height: 50px;
        text-align: center;
        margin-top: 39px;
        cursor: pointer;
      }
    }
  }
}
</style>